<template>
  <div class="user-info">
    <header class="title">个人信息</header>
    <a-row class="base-info">
      <template v-for="(item, key, index) in items">
        <a-col
          :key="key"
          :offset="item.index % 2 === 0 ? 2 : 0"
          :span="4"
          class="label"
          >{{ item.label }}：</a-col
        >
        <a-col
          :key="item.key"
          :span="6"
          class="text"
          :title="userInfo[item.key]"
          >{{ userInfo[item.key] }}</a-col
        >
        <div v-if="key % 2 === 1" :key="index" class="row-gap" />
      </template>
    </a-row>
    <a-row class="base-info">
      <a-col :offset="2" :span="4" class="label protrait">头像</a-col>
      <a-col :span="16">
        <div
          v-for="(imageUrl, index) in fileList"
          :key="index"
          class="image-item"
        >
          <img class="image" :src="imageUrl" />
          <div class="mask">
            <span class="icon view" @click="handlePreview(imageUrl)" />
            <span class="icon del" @click="handleRemove(index)" />
          </div>
        </div>
        <div class="image-item">
          <a-upload
            :action="uploadUrl"
            list-type="picture-card"
            :show-upload-list="false"
            @preview="handlePreview"
            @change="handleChange"
          >
            <a-icon v-if="loading" type="loading" />
            <div v-else>
              <a-icon type="plus" />
              <div class="ant-upload-text">
                上传
              </div>
            </div>
          </a-upload>
        </div>
      </a-col>
    </a-row>
    <a-row class="pass-cont">
      <a-col :offset="2" :span="4" class="pass">修改密码</a-col>
    </a-row>
    <a-form :form="form">
      <a-form-item
        label="原密码"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 8 }"
      >
        <a-input
          v-decorator="[
            'oldpass',
            {
              rules: [{ required: true, message: '请输入原密码' }]
            }
          ]"
          placeholder="请输入原密码"
        />
      </a-form-item>
      <a-form-item
        label="新密码"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 8 }"
      >
        <a-input
          v-decorator="[
            'newpass',
            {
              rules: [
                {
                  required: true,
                  message:
                    '请输入6-12位字符，必须包含大小写字母、数字和特殊字符'
                },
                { validator: handleValidator }
              ]
            }
          ]"
          placeholder="请输入6-12位字符，必须包含大小写字母、数字和特殊字符"
        />
      </a-form-item>
      <a-form-item
        label="确认密码"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 8 }"
      >
        <a-input
          v-decorator="[
            'confirmpass',
            {
              rules: [
                {
                  required: true,
                  message:
                    '请输入6-12位字符，必须包含大小写字母、数字和特殊字符'
                },
                { validator: handleValidator }
              ]
            }
          ]"
          placeholder="请输入6-12位字符，必须包含大小写字母、数字和特殊字符"
        />
      </a-form-item>
    </a-form>
    <a-row class="submit-cont">
      <a-button class="btn-cancel" @click="handleReset">取消</a-button>
      <a-button type="primary" @click="handleSave">保存</a-button>
    </a-row>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="图片预览" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { index: 0, label: '账号名称', key: 'account' },
        { index: 1, label: '账号别名', key: 'alias' },
        { index: 2, label: '姓名', key: 'name' },
        { index: 3, label: '英文名', key: 'ename' },
        { index: 4, label: '手机号码', key: 'mobile' },
        { index: 5, label: '固定号码', key: 'phone' },
        { index: 6, label: '邮箱地址', key: 'email' },
        { index: 7, label: '居住地址', key: 'address' }
      ],
      userInfo: {
        account: 'test'
      },
      fileList: [],
      loading: false,
      previewImage: String,
      previewVisible: false,
      uploadUrl: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      form: this.$form.createForm(this, { name: 'userForm' })
    }
  },
  mounted() {},
  methods: {
    handleCancel() {
      this.previewVisible = false
    },
    handleRemove(index) {
      this.fileList.splice(index, 1)
    },
    handlePreview(url) {
      this.previewImage = url
      this.previewVisible = true
    },
    handleChange(info) {
      const status = info.file.status

      if (status === 'done') {
        const { url } = info.file.response

        this.loading = false
        this.fileList.push(url)
      } else if (status === 'error') {
        this.loading = false
      } else {
        this.loading = true
      }
    },
    handleSave() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('data: ', values)
        }
      })
    },
    handleValidator(rule, value, callback) {
      const { getFieldValue } = this.form
      let errInfo

      if (rule.field === 'confirmpass' && value !== getFieldValue('newpass')) {
        errInfo = '两次密码输入不一致'
      }
      callback(errInfo)
    },
    handleReset() {
      this.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.user-info {
  margin: 0 24px 0 0;
  border-top: 24px solid #eff2f5;
  background-color: #fff;

  .title {
    line-height: 76px;
    color: #1d1f24;
    text-align: center;
    font-size: 24px;
  }

  .base-info {
    font-size: 16px;
    color: #1d1f24;

    .label {
      text-align: right;
      padding-right: 10px;

      &.protrait {
        padding-right: 58px;
      }
    }

    .text {
      color: #4b5d6c;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .row-gap {
      float: left;
      width: 100%;
      padding-bottom: 20px;
    }

    .image-item {
      position: relative;
      display: inline-block;
      width: 76px;
      height: 76px;
      vertical-align: top;

      /deep/ .ant-upload-picture-card-wrapper,
      /deep/ .ant-upload {
        width: 100%;
        height: 100%;
        border: none;
        color: #5f78ff;
        font-size: 12px;
        background: #e7e7e7;
      }

      .image {
        width: 100%;
        height: 100%;
      }

      .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);

        .icon {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-top: 30px;
          cursor: pointer;
        }

        .del {
          margin-left: 6px;
          background: url('~@/assets/images/icon/gsd-icon-remove.svg');
          background-size: contain;
        }

        .view {
          background: url('~@/assets/images/icon/gsd-icon-preview.svg');
          background-size: contain;
        }
      }

      &:hover {
        .mask {
          display: block;
        }
      }

      & + .image-item {
        margin-left: 12px;
      }
    }
  }

  .pass-cont {
    margin: 20px 0;

    .pass {
      text-align: right;
      padding-right: 20px;
      font-size: 18px;
      color: #5f78ff;
    }
  }

  .submit-cont {
    text-align: right;
    padding: 0 40px 20px 0;

    .btn-cancel {
      margin-right: 20px;
      border: none;
      color: #5f78ff;
    }
  }
}
</style>
